import { OperationMessage, OperationMessageType, useMessageStore } from '@/store/message';
import BaseOperationMessages, {
  OperationMessagesCategoredItem,
} from '@/components/BaseOperationMessage';
import { cn } from '@/lib/utils';
import { getGigaSkuAndProductId } from '@/lib/giga';
import { useProcess } from './hook/useProcess';
import { usePush } from './hook/useDiaoxiaomi';
import { TaskType } from '../hook/useConcurrentRequest';

export default function OperationMessages({
  className,
  categoryItemActionRenderer,
  ...props
}: {
  className: string;
  categoryItemActionRenderer: (message: OperationMessagesCategoredItem) => React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>) {
  const operationMessages = useMessageStore((state) => state.operationMessages);
  return (
    <BaseOperationMessages
      {...props}
      className={className}
      categoryItemActionRenderer={categoryItemActionRenderer}
      operationMessages={operationMessages}
    ></BaseOperationMessages>
  );
}

type OperationMessageCategoryProps = {
  children?: React.ReactNode;
  categoryItem: OperationMessagesCategoredItem;
  className?: string;
};

export function OperationMessageCategory({
  children,
  className,
  categoryItem,
  ...props
}: OperationMessageCategoryProps) {
  const category = categoryItem.category;
  const { processProduct } = useProcess();
  const { pushProduct, pushProductVideo } = usePush();

  return (
    <div className={cn(className, 'flex items-center')} {...props}>
      <div>[{category}]: 加工上传流程</div>
      <div
        className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 ml-1 px-1 py-1 h-auto text-xs no-underline hover:!bg-[#337AB7] bg-[#428BCA]"
        onClick={async (event) => {
          event.stopPropagation();
          const [gigaSku, gigaProductId] = getGigaSkuAndProductId(category);
          await processProduct({
            skuIdInfo: category,
            gigaProductId,
            gigaSku,
            force: true,
            taskType: TaskType.process,
          });
        }}
      >
        重新加工
      </div>
      <div
        className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 ml-1 px-1 py-1 h-auto text-xs no-underline hover:!bg-[#337AB7] bg-[#428BCA]"
        onClick={async (event) => {
          event.stopPropagation();
          const [gigaSku, gigaProductId] = getGigaSkuAndProductId(category);
          await pushProduct({
            skuIdInfo: category,
            gigaProductId,
            gigaSku,
            force: true,
            taskType: TaskType.push,
          });
        }}
      >
        重新上传
      </div>
      <div
        className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 ml-1 px-1 py-1 h-auto text-xs no-underline hover:!bg-[#337AB7] bg-[#428BCA]"
        onClick={async (event) => {
          event.stopPropagation();
          const [gigaSku, gigaProductId] = getGigaSkuAndProductId(category);
          await pushProductVideo({
            skuIdInfo: category,
            gigaProductId,
            gigaSku,
            force: true,
            taskType: TaskType['push-video'],
          });
        }}
      >
        重新上传视频
      </div>
    </div>
  );
}
